<template>
    <div>
    <div style="background-color:aliceblue;height: 50px;" class="parent">
      <el-button   @click="dialogFormVisible = true">新增房号</el-button>
      <el-button>批量下架</el-button>
      <el-button>批量删除</el-button>
      <el-button>批量导入</el-button>
        <el-select v-model="RoomNo.roomTypeId" placeholder="全部房型" style="width: 100px;" @change="GetRoomNo()">
          <el-option v-for="item in Roomtypedata"  :label="item.roomName" :value="item.id" />
        </el-select>
        <el-select v-model="RoomNo.roomStatus"  style="width: 100px;" placeholder="全部状态" @change="GetRoomNo()">
          <el-option label="上架" value="true" />
          <el-option label="下架" value="false" />
        </el-select>
      <el-input
      style="width: 300px;"
      placeholder="房号"
      class="input-with-select"
      v-model="RoomNo.roomNO"
      @change="GetRoomNo()"
    >
    <template #append>
        <el-button />
      </template>
  </el-input>
    </div>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <div style="background-color:aliceblue;height: 700px;">
      <el-table :data="RoomNodata" stripe style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="roomName" label="房型名称"  />
        <el-table-column prop="roomNO" label="房号"  />
        <el-table-column prop="roomSort" label="排序" />
        <el-table-column prop="roomRemark" label="备注"  />
        <el-table-column prop="roomStatus" label="状态">
          <template #default="{row}">
          <el-tag v-if="row.roomStatus == 1" type="success">上架</el-tag>
          <el-tag v-if="row.roomStatus==0" type="danger">下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column  label="操作">
          <template   #default="{row}">
            <el-button type="text" @click="getUpdate(row)">编辑</el-button>
            <el-button type="text" @click="GetUpdateState(row)">下架</el-button>
            <el-button type="text" @click="DelRoomeNo(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
<!-- 房号添加 -->
  <el-dialog v-model="dialogFormVisible" title="添加" width="500">
    <el-form :model="RoomNOdataAdd">
      <el-form-item label="房型" :label-width="formLabelWidth">
        <el-select v-model="RoomNOdataAdd.roomTypeId" placeholder="请选择">
          <el-option v-for="item in Roomtypedata" :label="item.roomName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="房号" :label-width="formLabelWidth">
        <el-input v-model="RoomNOdataAdd.roomNO" autocomplete="off" />
      </el-form-item>
      <el-form-item label="排序" :label-width="formLabelWidth">
        <el-input v-model="RoomNOdataAdd.roomSort" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="RoomNOdataAdd.roomRemark" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="RoomNoAdd">确定</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
<!-- 房号修改 -->
<el-dialog v-model="dialogFormVisible1" title="修改" width="500">
    <el-form :model="RoomNoUpdate">
      <el-form-item label="房型" :label-width="formLabelWidth">
        <el-select v-model="RoomNoUpdate.roomTypeId" placeholder="请选择">
          <el-option v-for="item in Roomtypedata" :label="item.roomName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="房号" :label-width="formLabelWidth">
        <el-input v-model="RoomNoUpdate.roomNO" autocomplete="off" />
      </el-form-item>
      <el-form-item label="排序" :label-width="formLabelWidth">
        <el-input v-model="RoomNoUpdate.roomSort" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="RoomNoUpdate.roomRemark" autocomplete="off" />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="GetRoomNoUpdate()">确定</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>
<script setup lang="ts">
import { ref,reactive, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { ElMessage } from 'element-plus'
import axios from 'axios'
const dialogFormVisible = ref(false)
const dialogFormVisible1 = ref(false)
const formLabelWidth = '140px'
//房号显示
//#region 
const RoomNodata=ref([]);

const RoomNo=reactive({
  roomTypeId:'',
  roomNO:'',
  roomStatus:''
})

const GetRoomNo=()=>{
  axios.get("https://localhost:44392/RoomNoShow",{
    params:{
      roomTypeId:RoomNo.roomTypeId,
      roomNo:RoomNo.roomNO,
      roomStatus:RoomNo.roomStatus,
    }
  }).then(res=>{
    RoomNodata.value=res.data.data;
  })
}

//#endregion
//房号添加
//#region
//房型获取方法
const Roomtypedata=ref<any>([
  {
    roomName:'',
    id:''
  }
])
//显示方法
const GetRoomType=()=>{
  axios.get("https://localhost:44392/RoomTypeShow").then(res=>{
    Roomtypedata.value=res.data.data;
  })
}


//添加
const RoomNOdataAdd=reactive({
  roomTypeId: "",
  roomNO: "",
  roomSort: "",
  roomStatus: true,
  roomRemark: ""
})
const RoomNoAdd=()=>{
  axios.post("https://localhost:44392/RoomNoAdd",RoomNOdataAdd).then(res=>{
    if(res.data.code==200){
        ElMessage.success(res.data.msg);
        GetRoomNo();
    }
  })
}
//#endregion
//房号修改
//#region 
const RoomNoUpdate=ref({
  id: 0,
  roomTypeId: "",
  roomNO: "",
  roomSort: "",
  roomStatus: true,
  roomRemark: ""
})
const getUpdate=(row:any)=>{
  dialogFormVisible1.value=true;
  RoomNoUpdate.value=row;
}
const GetRoomNoUpdate=()=>{
      axios.put("https://localhost:44392/UpdateRoomNo",RoomNoUpdate.value).then(res=>{
        if(res.data.code==200){
              ElMessage.success(res.data.msg);
              GetRoomNo();

        }
      })
}
//#endregion
//房号删除
//#region 
  const DelRoomeNo=(row:any)=>{
    ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.delete('https://localhost:44392/DeleteRoomNo?id='+row.id).then(res=>{
        if(res.data.code==200){
            ElMessage.success(res.data.msg);
            GetRoomNo();
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
     
  }
//#endregion
//房号上架下架
//#region 
const GetUpdateState=(row:any)=>{

  axios.put("https://localhost:44392/UpdateRoomStatus?id="+row.id).then(res=>{
    if(res.data.code==200){
        ElMessage.success(res.data.msg);
        GetRoomNo();
    }
  })
}
//#endregion
onMounted(()=>{
  GetRoomNo();
  GetRoomType();
})


</script>